---
sidebar_position: 3
---

# Options

All available data attributes for the anchor element and props for the tooltip component.

import { Tooltip } from 'react-tooltip'

export const TooltipAnchor = ({ children, id, ...rest }) => {
  return (
    <span
      id={id}
      style={{
        display: 'flex',
        justifyContent: 'center',
        margin: 'auto',
        alignItems: 'center',
        width: '60px',
        height: '60px',
        borderRadius: '60px',
        color: '#222',
        background: 'rgba(255, 255, 255, 1)',
        cursor: 'pointer',
        boxShadow: '3px 4px 3px rgba(0, 0, 0, 0.5)',
        border: '1px solid #333',
      }}
      {...rest}
    >
      {children}
    </span>
  )
}

### Data attributes

```jsx
import { Tooltip } from 'react-tooltip';

<a
  data-tooltip-id="my-tooltip"
  data-tooltip-content="Hello world!"
>
  ◕‿‿◕
</a>
<Tooltip id="my-tooltip" />
```

<TooltipAnchor data-tooltip-id="my-tooltip" data-tooltip-content="Hello world!">
  ◕‿‿◕
</TooltipAnchor>
<Tooltip id="my-tooltip" />

#### Available attributes

| name                           | type       | required  | default     | values                                                                                                                            | description                                                                                                                               |
| ------------------------------ | ---------- | --------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| data-tooltip-id                | string     | false     |             |                                                                                                                                   | The id set on the tooltip element (same as V4's `data-for`)                                                                               |
| data-tooltip-content           | string     | false     |             |                                                                                                                                   | Content to be displayed in the tooltip (`html` is priorized over `content`)                                                               |
| data-tooltip-html              | string     | false     |             |                                                                                                                                   | HTML content to be displayed in tooltip                                                                                                   |
| data-tooltip-place             | string     | false     | `top`       | `top` `top-start` `top-end` `right` `right-start` `right-end` `bottom` `bottom-start` `bottom-end` `left` `left-start` `left-end` | Position relative to the anchor element where the tooltip will be rendered (if possible)                                                  |
| data-tooltip-offset            | number     | false     | `10`        | any `number`                                                                                                                      | Space between the tooltip element and anchor element (arrow not included in the calculation)                                              |
| data-tooltip-variant           | string     | false     | `dark`      | `dark` `light` `success` `warning` `error` `info`                                                                                 | Change the tooltip style with default presets                                                                                             |
| data-tooltip-wrapper           | string     | false     | `div`       | `div` `span`                                                                                                                      | Element wrapper for the tooltip container, can be `div`, `span`, `p` or any valid HTML tag                                                |
| ~~data-tooltip-events~~        | ~~string~~ | ~~false~~ | ~~`hover`~~ | ~~`hover click` `hover` `click`~~                                                                                                 | ~~Events to watch for when handling the tooltip state~~ <br/>**DEPRECATED**<br/>Use `openOnClick` tooltip prop instead                    |
| data-tooltip-position-strategy | string     | false     | `absolute`  | `absolute` `fixed`                                                                                                                | The position strategy used for the tooltip. Set to `fixed` if you run into issues with `overflow: hidden` on the tooltip parent container |
| data-tooltip-delay-show        | number     | false     |             | any `number`                                                                                                                      | The delay (in ms) before showing the tooltip                                                                                              |
| data-tooltip-delay-hide        | number     | false     |             | any `number`                                                                                                                      | The delay (in ms) before hiding the tooltip                                                                                               |
| data-tooltip-float             | boolean    | false     | `false`     | `true` `false`                                                                                                                    | Tooltip will follow the mouse position when it moves inside the anchor element (same as V4's `effect="float"`)                            |
| data-tooltip-hidden            | boolean    | false     | `false`     | `true` `false`                                                                                                                    | Tooltip will not be shown                                                                                                                 |
| data-tooltip-class-name        | string     | false     |             |                                                                                                                                   | Classnames for the tooltip container                                                                                                      |

### Props

```jsx
import { Tooltip } from 'react-tooltip';

<a id="my-anchor-element">◕‿‿◕</a>
<Tooltip
  anchorSelect="#my-anchor-element"
  content="Hello world!"
/>
```

<TooltipAnchor id="my-anchor-element">◕‿‿◕</TooltipAnchor>
<Tooltip anchorSelect="#my-anchor-element" content="Hello world!" />

#### Available props

| name                    | type                       | required | default             | values                                                                                                                            | description                                                                                                                                                     |
| ----------------------- | -------------------------- | -------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `ref`                   | Tooltip reference          | no       |                     | `React.useRef`                                                                                                                    | Reference object which exposes internal state, and some methods for manually controlling the tooltip. See [the examples](./examples/imperative-mode.mdx).       |
| `className`             | `string`                   | no       |                     |                                                                                                                                   | Class name to customize tooltip element. You can also use the default class `react-tooltip` which is set internally                                             |
| `classNameArrow`        | `string`                   | no       |                     |                                                                                                                                   | Class name to customize tooltip arrow element. You can also use the default class `react-tooltip-arrow` which is set internally                                 |
| `content`               | `string`                   | no       |                     |                                                                                                                                   | Content to be displayed in tooltip (`html` prop is priorized over `content`)                                                                                    |
| ~~`html`~~              | ~~`string`~~               | ~~no~~   |                     |                                                                                                                                   | ~~HTML content to be displayed in tooltip~~ <br/>**DEPRECATED**<br/>Use `children` or `render` instead                                                          |
| `render`                | `function`                 | no       |                     |                                                                                                                                   | A function which receives a ref to the currently active anchor element and returns the content for the tooltip. Check the [examples](./examples/render.mdx)     |
| `place`                 | `string`                   | no       | `top`               | `top` `top-start` `top-end` `right` `right-start` `right-end` `bottom` `bottom-start` `bottom-end` `left` `left-start` `left-end` | Position relative to the anchor element where the tooltip will be rendered (if possible)                                                                        |
| `offset`                | `number`                   | no       | `10`                | any `number`                                                                                                                      | Space between the tooltip element and anchor element (arrow not included in calculation)                                                                        |
| `id`                    | `string`                   | no       |                     | any `string`                                                                                                                      | The tooltip id. Must be set when using `data-tooltip-id` on the anchor element                                                                                  |
| ~~`anchorId`~~          | ~~`string`~~               | ~~no~~   |                     | ~~any `string`~~                                                                                                                  | ~~The id for the anchor element for the tooltip~~ <br/>**DEPRECATED**<br/>Use `data-tooltip-id` or `anchorSelect` instead                                       |
| `anchorSelect`          | CSS selector               | no       |                     | any valid CSS selector                                                                                                            | The selector for the anchor elements. Check [the examples](./examples/anchor-select.mdx) for more details                                                       |
| `variant`               | `string`                   | no       | `dark`              | `dark` `light` `success` `warning` `error` `info`                                                                                 | Change the tooltip style with default presets                                                                                                                   |
| `wrapper`               | HTML tag                   | no       | `div`               | `div` `span` `p` ...                                                                                                              | Element wrapper for the tooltip container, can be `div`, `span`, `p` or any valid HTML tag                                                                      |
| `children`              | React node                 | no       | `undefined`         | valid React children                                                                                                              | The tooltip children have lower priority compared to the `content` prop and the `data-tooltip-content` attribute. Useful for setting default content            |
| ~~`events`~~            | ~~`string[]`~~             | ~~no~~   | ~~`hover`~~         | ~~`hover` `click`~~                                                                                                               | ~~Events to watch for when handling the tooltip state~~ <br/>**DEPRECATED**<br/>Use `openOnClick` tooltip prop instead                                          |
| `openOnClick`           | `boolean`                  | no       | `false`             | `true` `false`                                                                                                                    | When enabled, the tooltip will open on click instead of on hover. Use `openEvents`, `closeEvents`, and `globalCloseEvents` for more customization               |
| `positionStrategy`      | `string`                   | no       | `absolute`          | `absolute` `fixed`                                                                                                                | The position strategy used for the tooltip. Set to `fixed` if you run into issues with `overflow: hidden` on the tooltip parent container                       |
| `delayShow`             | `number`                   | no       |                     | any `number`                                                                                                                      | The delay (in ms) before showing the tooltip                                                                                                                    |
| `delayHide`             | `number`                   | no       |                     | any `number`                                                                                                                      | The delay (in ms) before hiding the tooltip                                                                                                                     |
| `float`                 | `boolean`                  | no       | `false`             | `true` `false`                                                                                                                    | Tooltip will follow the mouse position when it moves inside the anchor element (same as V4's `effect="float"`)                                                  |
| `hidden`                | `boolean`                  | no       | `false`             | `true` `false`                                                                                                                    | Tooltip will not be shown                                                                                                                                       |
| `noArrow`               | `boolean`                  | no       | `false`             | `true` `false`                                                                                                                    | Tooltip arrow will not be shown                                                                                                                                 |
| `clickable`             | `boolean`                  | no       | `false`             | `true` `false`                                                                                                                    | Allow interaction with elements inside the tooltip. Useful when using buttons and inputs                                                                        |
| ~~`closeOnEsc`~~        | ~~`boolean`~~              | ~~no~~   | ~~`false`~~         | ~~`true` `false`~~                                                                                                                | ~~Pressing escape key will close the tooltip~~ <br/>**DEPRECATED**<br/>Use `globalCloseEvents` instead.                                                         |
| ~~`closeOnScroll`~~     | ~~`boolean`~~              | ~~no~~   | ~~`false`~~         | ~~`true` `false`~~                                                                                                                | ~~Scrolling will close the tooltip~~ <br/>**DEPRECATED**<br/>Use `globalCloseEvents` instead.                                                                   |
| ~~`closeOnResize`~~     | ~~`boolean`~~              | ~~no~~   | ~~`false`~~         | ~~`true` `false`~~                                                                                                                | ~~Resizing the window will close the tooltip~~ <br/>**DEPRECATED**<br/>Use `globalCloseEvents` instead.                                                         |
| `openEvents`            | `Record<string, boolean>`  | no       | `mouseover` `focus` | `mouseover` `focus` `mouseenter` `click` `dblclick` `mousedown`                                                                   | Events to be listened on the anchor elements to open the tooltip                                                                                                |
| `closeEvents`           | `Record<string, boolean>`  | no       | `mouseout` `blur`   | `mouseout` `blur` `mouseleave` `click` `dblclick` `mouseup`                                                                       | Events to be listened on the anchor elements to close the tooltip                                                                                               |
| `globalCloseEvents`     | `Record<string, boolean>`  | no       |                     | `escape` `scroll` `resize` `clickOutsideAnchor`                                                                                   | Global events to be listened to close the tooltip (`escape` closes on pressing `ESC`, `clickOutsideAnchor` is useful with click events on `openEvents`)         |
| `imperativeModeOnly`    | `boolean`                  | no       | `false`             | `true` `false`                                                                                                                    | When enabled, default tooltip behavior is disabled. Check [the examples](./examples/imperative-mode.mdx) for more details                                       |
| `style`                 | `CSSProperties`            | no       |                     | a CSS style object                                                                                                                | Add inline styles directly to the tooltip                                                                                                                       |
| `position`              | `{ x: number; y: number }` | no       |                     | any `number` value for both `x` and `y`                                                                                           | Override the tooltip position on the DOM                                                                                                                        |
| `isOpen`                | `boolean`                  | no       |                     | `true` `false`                                                                                                                    | The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip (can be used **without** `setIsOpen`) |
| `defaultIsOpen`         | `boolean`                  | no       | `false`             | `true` `false`                                                                                                                    | It determines the initial visibility of the tooltip. If true, the tooltip is shown by default, if false or not provided then it's in hidden state by default.   |
| `setIsOpen`             | `function`                 | no       |                     |                                                                                                                                   | The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip                                       |
| `afterShow`             | `function`                 | no       |                     |                                                                                                                                   | A function to be called after the tooltip is shown                                                                                                              |
| `afterHide`             | `function`                 | no       |                     |                                                                                                                                   | A function to be called after the tooltip is hidden                                                                                                             |
| `disableTooltip`        | `function`                 | no       |                     |                                                                                                                                   | A function that takes a ref to each anchor element and returns a boolean indicating whether to hide the tooltip for that specific anchor.                       |
| `middlewares`           | `Middleware[]`             | no       |                     | array of valid `floating-ui` middlewares                                                                                          | Allows for advanced customization. Check the [`floating-ui` docs](https://floating-ui.com/docs/middleware) for more information                                 |
| `border`                | CSS border                 | no       |                     | a CSS border style                                                                                                                | Change the style of the tooltip border (including the arrow)                                                                                                    |
| `opacity`               | CSS opacity                | no       | `0.9`               | a CSS opacity value                                                                                                               | Change the opacity of the tooltip                                                                                                                               |
| `arrowColor`            | CSS color                  | no       |                     | a CSS background color                                                                                                            | Change color of the tooltip arrow                                                                                                                               |
| `arrowSize`             | `number`                   | no       | `8`                 |                                                                                                                                   | Change the size of the tooltip arrow                                                                                                                            |
| `disableStyleInjection` | `boolean` or `'core'`      | no       | `false`             | `true` `false` `'core'`                                                                                                           | Whether to disable automatic style injection. Do not set dynamically. Check the [styling page](./examples/styling#disabling-reacttooltip-css) for more details  |
| `role`                  | React.AriaRole             | no       | `tooltip`           | `'tooltip'` `'dialog'`                                                                                                            | Set ARIA role, either `tooltip` or `dialog` if the tooltip should contain focusable elements                                                                    |
